<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<%@include file="/common/head.jsp" %>
<script src="${ctx }/js/Huploadify/jquery.Huploadify.js"></script>
<link href="${ctx }/js/Huploadify/Huploadify.css" rel="stylesheet">

<style>
    p .btn, #upload-info {
        margin-right: 10px;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form role="form" class="form-inline" id="query-form" method="post"
                          action="${ctx }/admin/agent/agentCustomerList">
                        <!-- 查询开始 -->
                        <div class="form-group">
                            <input type="text" id="query-name" name="nameOrMobile" value="${query.nameOrMobile}"
                                   class="form-control input-sm" placeholder="输入医生名称/联系方式">

                        </div>
                        <div class="form-group">
                            <label for="query-status" class="sr-only2">状态</label>
                            <select name="status" id="query-status" class="form-control">
                                <option value="">全部</option>
                                <option value="0" <c:if test="${query.status == 0}">selected</c:if>>已禁用</option>
                                <option value="1" <c:if test="${query.status == 1}">selected</c:if>>已启用</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary btn-sm" type="submit"><i class="fa fa-search"></i>&nbsp;查询
                            </button>
                        </div>
                        <!-- 查询结束 -->
                    </form>

                    <div>
                        <p>
                            <button type="button" class="btn btn-sm btn-outline btn-primary" onclick="add()">
                                新增
                            </button>
                            <button type="button" class="btn btn-sm btn-outline btn-primary" onclick="download()">
                               下载导入模板
                            </button>

                            <span id="upload-info"></span>

                            <%--<button type="button" class="btn btn-sm btn-outline btn-primary" onclick="importIn()">
                                导入
                            </button>--%>
                        </p>
                    </div>
                    <table id="table" data-toggle="table" data-striped="true" data-click-to-select="true"
                           data-mobile-responsive="true">
                        <thead>
                        <tr>
                            <th data-field="type">用户类型</th>
                            <th data-field="orgName">机构名称</th>
                            <th data-field="clientName">医生名称</th>
                            <th data-field="mobile">联系方式</th>
                            <th data-field="expireDate">到期时间</th>
                            <th data-field="residualTime">剩余时间</th>
                            <th data-field="operation">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${list }" var="n" varStatus="idx">
                            <tr data-index="${idx.index }" data-id="${n.id }">
                                <td style="">
                                    <c:forEach items="${types}" var="t">
                                        <c:if test="${n.type == t.value }">
                                            ${t.remark}
                                        </c:if>
                                    </c:forEach>
                                </td>
                                <td style="">${n.orgName}</td>
                                <td>${n.name}</td>
                                <td style="">${n.mobile}</td>
                                <td style="">
                                    <c:choose>
                                        <c:when test="${n.expireDate == null }">
                                            <fmt:formatDate value="${n.created}" pattern="yyyy-MM-dd"/>
                                        </c:when>
                                        <c:otherwise>
                                            <c:if test="${n.restDays < 10 }">
                                                <b style="color: red;"><fmt:formatDate value="${n.expireDate}" pattern="yyyy-MM-dd"/></b>
                                            </c:if>
                                            <c:if test="${n.restDays >= 10}">
                                                <fmt:formatDate value="${n.expireDate}" pattern="yyyy-MM-dd"/>
                                            </c:if>
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td style="">
                                    <c:choose>
                                        <c:when test="${n.expireDate == null }">
                                            <b style="color: red;">未激活</b>
                                        </c:when>
                                        <c:otherwise>
                                            <c:if test="${n.restDays < 10 && n.restDays >= 0}"><b style="color: red;">${n.restDays}天</b></c:if>
                                            <c:if test="${n.restDays >= 10}">${n.restDays}天</c:if>
                                            <c:if test="${n.restDays < 0}"><b style="color: red;">已到期</b></c:if>
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td style="">
                                    <c:if test="${n.status == 0}">
                                        <a href="javascript: void(0);" onclick="updateStatus(${n.id}, 1)">启用</a>&nbsp;&nbsp;
                                    </c:if>
                                    <c:if test="${n.status == 1}">
                                        <a href="javascript: void(0);" onclick="updateStatus(${n.id}, 0)">禁用</a>&nbsp;&nbsp;
                                    </c:if>
                                    <a href="javascript: void(0);" onclick="detail(${n.id})">详情</a>&nbsp;&nbsp;
                                    <c:choose>
                                        <c:when test="${n.expireDate == null }">
                                            <a href="javascript: void(0);" onclick="renew(${n.id})">激活</a>
                                        </c:when>
                                        <c:otherwise>
                                            <a href="javascript: void(0);" onclick="renew(${n.id})">续费</a>
                                        </c:otherwise>
                                    </c:choose>

                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>

                    <%@include file="/common/page.jsp" %>
                </div>
            </div>
        </div>
    </div>
</div>

<%@include file="/common/foot.jsp" %>
<script>
    function download() {
        window.location.href="${ctx}/admin/reportForm/download";
    }

    function checkUpload(data) {
        if (Object.prototype.toString.call(data) === "[object String]") {
            data = eval("(" + data + ")");
        }
        if (data.success) {
            ok(data.msg);
            return true;
        } else {
            errorAlert(data.msg);
            return false;
        }
    }

    function add() {
        layer.open({
            title: '新增',
            type: 2,
            skin: 'layui-layer-rim', //加上边框
            area: [layer_default_width, layer_default_height], //宽高
            content: "${ctx}/admin/agent/agentCustomerDetail",
            btn: ['确定', '取消'],
            yes: function(index, layero){ //或者使用btn1
                var detailForm = layer.getChildFrame('form', index);
                var iframeWin = window[layero.find('iframe')[0]['name']];
                if(iframeWin.validateInput()){
                    detailForm.ajaxSubmit({
                        success: function(data) {
                            if(isSuccess(data)){
                                data = JSON.parse(data);
                                layer.close(index);
                                layer.alert("新增成功，开通BMJ全科能力培训功能需一至两个工作日，期间请先使用BMJ临床实践", {icon: 1,closeBtn: 0},
                                    function (index) {
                                        top.$("#customerCount").html(data.data.customerCount);
                                        top.$("#remainPackageCount").html(data.data.remainPackageCount);
                                        top.$("#newlyEnrolledCount").html(data.data.newlyEnrolledCount);
                                        reload();
                                    });
                            } else {

                            }

                        }
                    });
                }
            }, cancel: function(index){ //或者使用btn2
            },
        });
    }
    function updateStatus(id, status) {
        k.layer.updateStatus('${ctx}/admin/agent/enableOrDisable', id, status);
    }

    function detail(id) {
        k.layer.detail("${ctx}/admin/agent/agentCustomerDetail?id="+id);
    }

    function renew(id) {
        k.layer.editAndReloadTop("${ctx}/admin/agent/agentCustomerRenew?id="+id);
    }

    function importIn() {
        
    }
    
    var page = "${page.page}";

    function reload() {
        page_submit(page);
    }

    function fileUpload(id, fileTypeExts, multi, fileObjName, buttonText, uploader) {
        $("#" + id).Huploadify({
            auto: true,
            fileTypeExts: fileTypeExts,
            multi: multi,
            method: 'post',
            fileObjName: fileObjName,
            fileSizeLimit: 2097152,
            showUploadedPercent: false,
            buttonText: buttonText,
            uploader: uploader,
            filesSelected: 100,
            onUploadSuccess: function (file, data) {
                var data = JSON.parse(data);
                layer.msg(data.msg, {
                    time: 0,
                    btn: ['确定'],
                    yes: function(index){
                        layer.close(index);
                        reload();
                    },
                    cancel: function(){
                        reload();
                    }
                })
            },
            onUploadError: function (file, data) {
                if (checkUpload(data)) {
                    reload();
                }
            }
        });
    }

    jQuery(document).ready(function () {
        fileUpload('upload-info', '*.xlsx;*.xls', false, 'file', '<i class="fa fa-upload"></i>&nbsp;医生信息导入', '${ctx}/admin/reportForm/importCustomer');
        $("#upload-info a").attr("class","btn btn-sm btn-sm btn-primary");
    })

    paging('pagination', ${page.totalPages}, ${page.page});

</script>
</body>
</html>